<template>
  <d2-crud
    :columns="columns"
    :data="data"
    index-row
    :loading="loading"
    :loading-options="loadingOptions"
    :pagination="pagination"
    :options="options"
    :rowHandle="rowHandle"
    selection-row
    @row-click="rowClick"
    @selection-change="selectChange"
    @edit-model="edit"
    @deploy-model="deployModel"
    @pagination-current-change="paginationCurrentChange"
    ref="d2Crud">
    <div class="title" slot="header">
      <span class="text">模型列表</span>
      <head-btns :add="add" :del="del"/>
    </div>
  </d2-crud>
</template>

<script>

  import {mapState, mapMutations, mapActions} from 'vuex'
  import {frameInRoutes} from '@/router/routes'
  import layoutHeaderAside from '@/views/layout/header-aside'
  import zhzfUtils from '@/assets/utils/zhzf-util'
  import workflowApi from '@/api/system/workflow';
  import HeadBtns from "@/views/comps/zhzf/head-btns";
  import tabPage from '@/views/system/workflow/design'
  import tabPageMinxin from '@/assets/minxin/tag-page';
  export default {
    mixins: [tabPageMinxin],
    components: {
      HeadBtns
    },
    data() {
      return {
        columns: [
          // {title: '类别', key: 'category'},
          {title: '名称', key: 'name', width: 150},
          {title: '版本', key: 'version', width: 50},
          {title: '创建人', key: 'creator', width: 80},
          {
            title: '创建时间', key: 'createTime', formatter: (row, col, val) => {
              return zhzfUtils.formatDts(val, 'YYYY-MM-DD HH:mm:ss')
            }
          },
          {
            title: '修改时间', key: 'lastUpdateTime', formatter: (row, col, val) => {
              return zhzfUtils.formatDts(val, 'YYYY-MM-DD HH:mm:ss')
            }
          },
          {title: '流程模板状态', key: 'deploymentId', formatter: (row, col, val) => {
              return val ? "已发布" : "未发布"
            }
          },
        ],
        data: [],
        loading: false,
        loadingOptions: {
          text: '正在加载数据',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.8)'
        },
        options: {
          stripe: true,
          highlightCurrentRow: true
        },
        rowHandle: {
          custom: [
            {title: '编辑', size: 'mini', emit: 'edit-model', icon: "el-icon-edit", style: "color:#67c23a;"},
            {title: '部署', size: 'small', emit: 'deploy-model', icon: "fa fa-puzzle-piece", style: "color:#f56c6c;"}
          ]
        },
        pagination: {
          currentPage: 1,
          pageSize: 15,
          total: 0
        },
        selected: [],
      }
    },
    computed: {
      ...mapState('d2admin/menu', [
        'header'
      ])
    },
    mounted() {
      this.fetchData()
    },
    methods: {
      ...mapMutations({
        pageInit: 'd2admin/page/init',
        headerSet: 'd2admin/menu/headerSet'
      }),
      rowClick(row) {
        this.$refs.d2Crud.$children[1].toggleRowSelection(row);
      },
      selectChange(selection) {
        this.selected = selection;
      },
      async deployModel(obj) {
        window.event.stopPropagation(); //阻止冒泡
        let row = obj.row;
        let resp = await workflowApi.modelDeploy(row);
        let ok = resp.ok;
        zhzfUtils.showTips(ok?'操作成功':'操作失败',ok)
        if (ok) {
          await this.fetchData();
        }
      },
      async add() {
        let resp = await workflowApi.modelAdd();
        let newModelId = resp.data.id;
        this.pushTabPage(newModelId);
      },
      edit({row}) {
        window.event.stopPropagation(); //阻止冒泡
        this.pushTabPage(row.id);
      },
      pushTabPage(modelId) {
        let pageTitle = '工作流模板设计';
        let rpath = 'workflow/design';
        let rname = 'workflowDesign';

        this.addTabPage(pageTitle,rpath,rname,tabPage,{modelId: modelId})
      },
      del() {
        this.$confirm('确定要删除选择的数据项？')
          .then(async res => {
            if (res == 'confirm') {
              let ids = [];
              for (let i = 0; i < this.selected.length; i++) {
                let item = this.selected[i];
                ids.push(item.id);
              }
              await workflowApi.modelDel(ids);
              this.$notify({title: '操作提示', message: '操作成功', type: 'success'});
              await this.fetchData();
            }
          })
      },
      paginationCurrentChange(currentPage) {
        this.pagination.currentPage = currentPage;
        this.fetchData()
      },
      async fetchData() {
        this.loading = true;
        let res = await workflowApi.modelPage(this.pagination);
        this.data = res.data.rows;
        this.pagination.total = res.data.total || this.data.length;
        this.loading = false
      }
    }
  }
</script>
